<template>
  <div>
    <div class="card tr mb2">
      <el-popover placement="bottom" width="200" trigger="click">
        <el-checkbox-group v-model="showItemList">
          <el-checkbox v-for="(item,key) in allItemList" :key="key" :label="item"></el-checkbox>
        </el-checkbox-group>
        <el-button slot="reference" icon="el-icon-menu" size="mini" type="primary" circle></el-button>
      </el-popover>

      <el-button
        icon="el-icon-search"
        @click="formShow= !formShow"
        size="mini"
        type="primary"
        circle
      ></el-button>
      <el-button size="mini"  type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">新增</el-button>
      <el-button size="mini"  type="danger" icon="el-icon-remove" @click="deleteBatch">删除</el-button>
    </div>
    <div class="card" v-show="formShow">
      <el-form :model="searchForm" label-width="80px"  inline>
            <el-form-item label="委托人" >
              <user-selector
                :disabled="viewHide"
                :model="consignPerson"
                :multi="multi" 
                @select="selectConsignPerson2"
                placeholder="请输入委托人"
              ></user-selector>
            </el-form-item>
            <el-form-item label="目标人" >
              <user-selector
                :disabled="viewHide"
                :model="targetPerson"
                :multi="multi" 
                @select="selectTargetPerson2"
                placeholder="请输入目标人"
              ></user-selector>
            </el-form-item>
            <el-form-item label="开始时间" >
              <el-date-picker
                type="date" size="mini"
                v-model="searchForm.startTime"
                @change="startTimeChange"
                placeholder="请输入开始时间"
                style="width:200px"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="截止时间" >
              <el-date-picker
                type="date" size="mini"
                v-model="searchForm.endTime"
                :picker-options="expireTimeOption"
                placeholder="请输入截止时间"
                 style="width:200px"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" @click="getList">查询</el-button>
              <el-button size="mini" @click="resetForm">重置</el-button>
            </el-form-item>
      </el-form>
    </div>
    <el-card class="ep-card" style="height: calc(100vh - 280px);">
      <el-row style="margin-top: 10px;">
        <el-table
          :data="tableData"
          border
          :height="height"
          @selection-change="handleSelectionChange"
          style="width: 100%"
          size="mini"
        >
          <el-table-column type="selection" width="50"></el-table-column>

          <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>

          <el-table-column prop="consignPersonName" align="center" min-width="180" label="委托人"></el-table-column>
          <el-table-column
            prop="targetPersonName"
            align="center"
            min-width="180"
            show-overflow-tooltip
            label="目标人"
          ></el-table-column>
          <el-table-column
            prop="startTime"
            align="center"
            min-width="180"
            label="开始时间"
            type="date"
            :formatter="dateFormatter"
          ></el-table-column>

          <el-table-column
            prop="endTime"
            align="center"
            min-width="180"
            label="截止时间"
            type="date"
            :formatter="dateFormatter"
          ></el-table-column>

          <el-table-column prop="isUse" align="center" min-width="80" label="是否启用">
            <template slot-scope="scope">
              <div v-for="item in consignState" :key="item.key">
                <span v-if="item.key==scope.row.isUse">{{item.label}}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="name" align="center" label="操作" min-width="180">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="view(scope.row)">查看</el-button>
              <el-button type="text" size="mini" @click="edit(scope.row)">修改</el-button>
              <!--  <el-button type="text" @click="delete(scope.row.id)">删除</el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-show="tableData.length > 0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pager.page"
          background
          :page-sizes="[20, 40, 60, 80]"
          :page-size="pager.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pager.total"
          style="text-align:right"
        ></el-pagination>
      </el-row>
    </el-card>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      :before-close="handleFormClose"
    >
      <el-form :model="taskConsign" ref="taskConsign">
        <el-form-item label="委托人" label-width="120px">
          <user-selector
            :disabled="viewHide"
            :model="consignPerson"
            :multi="multi"
            @select="selectConsignPerson"
            placeholder="请输入委托人"
          ></user-selector>
        </el-form-item>

        <el-form-item label="目标人" label-width="120px">
          <user-selector
            :disabled="viewHide"
            :model="targetPerson"
            :multi="multi"
            @select="selectTargetPerson"
            placeholder="请输入目标人"
          ></user-selector>
        </el-form-item>

        <el-form-item label="委托开始时间" label-width="120px">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="taskConsign.startTime"
            @change="startTimeChange1"
            :disabled="viewHide"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="委托截止时间" label-width="120px">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="taskConsign.endTime"
            :disabled="viewHide"
            :picker-options="expireTimeOption1"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="启用状态" label-width="120px">
          <el-switch
            :disabled="viewHide"
            v-model="useable"
            @change="stateChange"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-show="!viewHide">
        <el-button @click="handleFormClose">取 消</el-button>
        <el-button type="primary" @click="doSave">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script src="@/pages/flow/js/taskConsign.js"></script>    